<template>
	<view class="container">
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				云音乐小程序
			</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input v-model="phone" type="text" placeholder="请输入手机号码" />
				</view>
				<view v-if="!change" class="input-item">
					<text class="tit">密码</text>
					<input v-model="pwd" type="password" placeholder="请输入密码" />
				</view>
				<view v-else class="input-item">
					<text class="tit">验证码</text>
					<view style="width:100%">
						<input style="width: 60%;display: inline-block;" v-model="captcha" maxlength="4" type="number"
							placeholder="请输入验证码" />
						<button class="confim-num" @tap="getConfimNum">{{count>0?'('+count+'s)':'获取验证码'}}</button>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @tap="login">登录</button>
			<view class="forget-section" @tap="changeLoginType">
				{{change?'切换手机密码登陆':'切换成手机验证码登录'}}
			</view>
			<!-- 二维码登录 -->
			<!-- <view class="qr" @tap="qrLogin">二维码登录</view> -->
		</view>
		
		<!-- 微信授权登录 -->
		<view class="weixin" @tap="weixinLogin">
			<image src="../../static/images/weixin.png" mode="widthFix" class="weixin-img"></image>
			<text style="font-size: 28rpx;color: #4399fc;">微信授权登录</text>
		</view>
		<view class="register-section">
			还没有账号?
			<text>马上注册</text>
		</view>

		<!-- 显示歌手简介 -->
		<view class="pull" v-if="isShow" @tap="closeMenu" />
		<view class="menu" :class="{'up':isShow, 'down':!isShow}">
			<view style="font-size: 17px;border-bottom: 1px solid #9E9E9E;border-radius: 2px;text-align: center;">请扫描下方二维码</view>
			<view class="img-container">
			    <img :src="qrCodeImg">
			</view>
		</view>

	</view>
</template>

<script>
	import {
		login,
		sendCaptcha,
		getQrCodeKey,
		getQrCode,
		checkQrCode
	} from '../../service/home'
	export default {
		data() {
			return {
				phone: '',
				pwd: '',
				captcha: '',
				change: true,
				count: 0,
				isShow:false,
				timestamp:0,
				key:'',	//获取key
				qrCodeImg: '',
				timer: null,
			}
		},
		onLoad() {
			
		},
		methods: {
			weixinLogin(){
				    // 1.该API仅支持微信小程序端（基础库2.10.4-2.27.0版本），版本以上的wx.getUserProfile 接口被收回
				    uni.getUserProfile({
					desc:'必须授权才能继续使用',
					lang:'zh_CN',
				    success: (res) => {
						console.log('login',res.userInfo)
						uni.$emit('login',{avatarUrl:"https://thirdwx.qlogo.cn/mmopen/vi_32/iafF5yEpBEHHWlayNBaKooicVYE7qZGXvcpB5JIicLyAEexoFrZSmGjWq68qVicIPJkt08r9DzsMY3mo7M4xFrsUdw/132"})
						uni.switchTab({
							url: '/pages/profile/profile'
						})
						},
					fail: (err) => {
						uni.showToast({
							title: '授权失败',
							icon:'error'
						})
					}
				    })
					
					// 2.小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。
					// uni.login({
					// 	provider: 'weixin',
					//   success (res) {
					//     if (res.code) {
					//       //发起网络请求
					//       uni.request({
					//         url: 'https://api.weixin.qq.com/sns/jscode2session',
					//         data: {
					// 			appid:'wx91cddf8f7e500754',
					// 			secret:'155f9b300c5ce5874fb42384f9ecba5f',
					//           js_code: res.code,
					// 		  grant_type:'authorization_code'
					//         },
					// 		success: (res) => {
								// 返回openid、session_key
					// 			console.log(res)
					// 		}
					//       })
					//     } else {
					//       console.log('登录失败！' + res.errMsg)
					//     }
					//   }
					// })
			},
			closeMenu(){
				this.isShow = false
			},
			getTimeStamp(){
				return Date.now()
			},
			qrLogin(){
				this.isShow = true
				this.timestamp = this.getTimeStamp()
				getQrCodeKey(this.timestamp).then(res => {
					this.key = res.data.unikey
				})
				this.timestamp = this.getTimeStamp()
				getQrCode(this.key,this.timestamp).then(res =>{
					this.qrCodeImg = res.data.qrimg
				})
				this.timestamp = this.getTimeStamp()
				checkQrCode(this.key,this.timestamp).then(res =>{
					if(res.code === 803){
						uni.switchTab({
							url: '/pages/profile/profile',
						})
					}
				})
			},
			changeLoginType() {
				this.change = !this.change
				this.captcha = ''
				this.pwd = ''
			},
			getConfimNum() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				this.count = 60
				let self = this
				let timer = setInterval(() => {
					if (self.count == 0) {
						clearInterval(timer)
					}
					self.count = --self.count
				}, 1000)
				sendCaptcha({
					phone: this.phone
				}).then(res => {
					uni.showToast({
						title: '已发送验证码',
						icon: 'none'
					})
				})
			},
			login() {
				let {
					phone,
					pwd,
					captcha
				} = this
				if (!phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else {
					let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
					if (!phoneReg.test(phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return
					} else {
						if (!pwd && !this.change) {
							uni.showToast({
								title: '请输入密码',
								icon: 'none'
							})
							return
						} else if (!captcha && this.change) {
							uni.showToast({
								title: '请输入验证码',
								icon: 'none'
							})
						} else {
							let params = {}
							if (this.change) {
								params = {
									phone,
									captcha,
									islogin: true
								}
							} else {
								params = {
									phone,
									password: pwd,
									islogin: true
								}
							}
							login(params).then(res => {
								if (res.code === 502) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								} else if (res.code === 400) {
									uni.showToast({
										title: '手机号不存在',
										icon: 'none'
									})
								} else if (res.code === 200) {
									uni.setStorage({
										data: JSON.stringify(res.profile),
										key: 'userInfo',
									})
									uni.switchTab({
										url: '/pages/profile/profile',
									})
								}
							})
						}
					}
				}
			},
		}
	}
</script>

<style>
	/* pages/login/login.wxss */
	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40rpx;
	}
	.weixin{
		bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.weixin-img{
		    width: 55rpx;
		    vertical-align: middle;
	}
	.img-container{
		text-align: center;
	}
	img{
		height: 450rpx;
		    width: 450rpx;
		    border: 1px red solid;
		    margin-top: 15rpx;
	}
	.up {
		transform: translateY(0);
	}

	.down {
		transform: translateY(100%);
	}

	/* 全局覆盖 */
	.pull {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 98;
	}

	/* 菜单 */
	.menu {
		width: 100%;
		height: 600rpx;
		background-color: #fffafa;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
		transition: all .5s;
		padding: 25rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
	}

	.qr {
		font-size: 28rpx;
		color: #4399fc;
		text-align: center;
		margin-top: 40rpx;
	}

	.left-top-sign {
		font-size: 120rpx;
		color: #f8f8f8;
		position: relative;
		left: -16rpx;
	}

	.welcome {
		position: relative;
		left: 50rpx;
		top: -90rpx;
		font-size: 46rpx;
		color: #555;
	}


	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;

	}

	.input-item:last-child {
		margin-bottom: 0;
	}

	.input-item .tit {
		height: 50rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		color: #606266;
	}

	.input-item input {
		height: 60rpx;
		font-size: 30rpx;
		color: #303133;
		width: 100%;
	}

	.confirm-btn {
		width: 630rpx !important;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50rpx;
		margin-top: 70rpx;
		background: #55aa7f;
		color: #fff;
		font-size: 32rpx;
		padding: 0;
	}

	.confirm-btn2:after {
		border-radius: 100px;
	}

	.forget-section {
		font-size: 28rpx;
		color: #4399fc;
		text-align: center;
		margin-top: 40rpx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50rpx;
		width: 100%;
		font-size: 28rpx;
		color: #606266;
		text-align: center;

	}

	.register-section text {
		color: #4399fc;
		margin-left: 10rpx;
	}

	.confim-num {
		display: inline-block;
		width: 40%;
		font-size: 24rpx;
		border: 1px #009688 solid;
	}
</style>